<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>文章列表</title>
   <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/iconfont.css">
   <link rel="stylesheet" href="css/main.css">
   <!-- jq -->
   <script src="./libs/jquery-1.12.4.min.js"></script>
   <!-- 模板引擎 -->
   <script src="./libs/template-web.js"></script>
   <script src="./libs/jedate/js/jedate.js"></script>
   <link rel="stylesheet" href="./libs/jedate/css/jeDate-test.css">
   <link rel="stylesheet" href="./libs/jedate/css/jedate.css">
   <script src="./libs/wangEditor/wangEditor.js"></script>
</head>

<body>
   <div class="container-fluid">
      <div class="common_title">
         文章发表
      </div>
      <div class="container-fluid common_con">
         <form class="form-horizontal article_form" id="form">
            <div class="form-group">
               <label for="inputTitle" class="col-sm-2 control-label">文章标题：</label>
               <div class="col-sm-10">
                  <input type="text" name="title" class="form-control title" id="inputTitle" value="文章标题文字">
               </div>
            </div>
            <div class="form-group">
               <label for="inputCover" class="col-sm-2 control-label">文章封面：</label>
               <div class="col-sm-10">
                  <img src="images/pic06.jpg" class="article_cover">
                  <input name="cover" type="file" id="inputCover">
               </div>
            </div>
            <div class="form-group">
               <label for="inputCategory" class="col-sm-2 control-label">文章类别：</label>
               <div class="col-sm-4">
                  <select class="form-control category" name="categoryId">
                     <option>类别一</option>
                     <option>类别二</option>
                     <option>类别三</option>
                     <option selected>类别四</option>
                     <option>类别五</option>
                  </select>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">发布时间：</label>
               <div class="col-sm-4">
                  <div class="jeinpbox">
                     <input type="text" class="jeinput" id="testred" placeholder="YYYY-MM-DD hh:mm:ss" name="date">
                     <div class="icons jebtns"></div>
                  </div>
               </div>
            </div>
            <div class="form-group">
               <label for="inputEmail3" class="col-sm-2 control-label">文章内容：</label>
               <div class="col-sm-10">
                  <div id="div1">
                     <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
                  </div>
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                  <button type="button" class="btn btn-success btn-release">发布</button>
                  <button type="button" class="btn btn-default btn-draft">存为草稿</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</body>

</html>
<script src="./libs/https.js"></script>
<script>
   $(function () {
      $.ajax({
         url: BigNew.category_list,
         type: 'get',
         // data:'',
         success: (res) => {
            // console.log(res);
            if (res.code == 200) {
               let str = '';
               $.each(res.data, (index, value) => {
                  str += `
                  <option value=${value.id}>${value.name}</option>
                  `
               })
               $('.category').html(str)
            }
         }
      });

      //1.给file表单元素注册onchange事件
      $('#inputCover').change(function () {
         //1.2 获取用户选择的图片
         let file = this.files[0];
         //1.3 将文件转为src路径
         let url = URL.createObjectURL(file);
         //1.4 将url路径赋值给img标签的src
         $('.article_cover').attr('src', url);
      });

      $('.jebtns').on('click', () => {
         jeDate('#testred', {
            trigger: false,
            isTime: true,
            format: 'YYYY-MM-DD hh:mm:ss',
            theme: { bgcolor: "purple", pnColor: "#FF6653" },
            zIndex: 10001,
         })
      })

      const E = window.wangEditor
      const editor = new E('#div1')
      // 或者 const editor = new E( document.getElementById('div1') )
      editor.create()

      /**
      * @description:保存文章数据
      * @param {type} state 文章发布或草稿状态
      * @return: formdata数据
      */
      function saveData(state) {
         let fd = new FormData(document.querySelector('form'))
         fd.append('content', editor.txt.html())
         fd.append('state', state)

         $.ajax({
            url: BigNew.article_publish,
            type: 'post',
            // dataType:'json',
            data: fd,
            contentType: false,
            processData: false,
            success: (res) => {
               if (res.code==200) {
                  alert(res.msg)
                  window.location='./article_list.html'
                  parent.$('.level02 li').eq(0).click()
               }
            }
         });
      }
      //   saveData(state);

      $('.btn-release').on('click', function (e) {
         e.preventDefault();
         saveData("已发布");
      });
      $('.btn-draft').on('click', function (e) {
         e.preventDefault();
         saveData("草稿");
      });
   })
</script>